@page
@{ Layout = "_LayoutApp"; }
<div v-if="total>0">
    <div v-for="(paper,index) in list" v-on:click="btnViewClick(paper)">
        <el-card shadow="hover" class="mb-3 rounded-4 shadow-lg">
            <div slot="header">
                <div class="fw-semibold">{{ paper.title }}</div>
                <div v-if="paper.planId>0 || paper.courseId>0">
                    <el-tag type="warning" size="mini">课后考试：{{ paper.courseName }}</el-tag>
                </div>
            </div>
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="position-relative">
                        <div v-if="paper.myExamTimes>0">
                            <div>
                                <i class="el-icon-document-copy fs-1 rounded-3 px-1 card-icon"></i>
                                <span class="position-absolute top-100 start-50 translate-middle mt-2 fs-6">{{ index+1 }}</span>
                            </div>
                        </div>
                        <div v-else>
                            <el-badge is-dot class="item">
                                <div>
                                    <i class="el-icon-document-copy fs-1 rounded-3 px-1 card-icon"></i>
                                    <span class="position-absolute top-100 start-50 translate-middle mt-2 fs-6">{{ index+1 }}</span>
                                </div>
                            </el-badge>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="fs-5">
                        <div class="mb-1">总分：{{paper.totalScore}}</div>
                        <div class="mb-1">及格分：{{paper.passScore}}</div>
                        <div class="mb-1">
                            考试次数：
                            <span class="text-success fw-bold" v-if="(paper.userExamTimes-paper.myExamTimes)>0">
                                {{paper.userExamTimes-paper.myExamTimes}}
                            </span>
                            <span class="fs-3 text-danger fw-bold" v-else>
                                0
                            </span>
                            /{{paper.userExamTimes}}
                        </div>
                    </div>
                </div>
                <div>
                    <div class="bg-light p-2 rounded-circle">
                        <el-button type="primary" circle icon="el-icon-s-order" class="p-3 fs-3" plain></el-button>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
    <div class="my-5 text-center">
        <el-button size="small" icon="el-icon-refresh-right" v-if="list.length>0 && list.length<total" v-on:click="btnLoadMoreClick" :loading="loadMoreLoading">加载更多</el-button>
        <small v-else>没有更多了</small>
    </div>
</div>
<div class="pt-10" v-else>
    <el-empty image="/sitefiles/assets/images/nodata.svg" description="暂无考试安排"></el-empty>
</div>
<div class="py-8"></div>
<div style="position:fixed;right:0;top:80%;" class="animate__animated animate__fadeInRightBig">
    <button type="button" class="btn btn-dark rounded-start-pill" v-on:click="examDialogVisible=true">
        <i class="bi bi-search text-light"></i>
    </button>
</div>
<template>
    <el-drawer title="考试查询"
               size="60%"
               :visible.sync="examDialogVisible"
               direction="btt">
        <div class="text-center p-2">
            <div class="card border mb-6 mb-md-0 shadow-none sticky-top">
                <div class="card-body border-top py-3">
                    <div class="text-start mb-2"><small>开考时间</small></div>
                    <el-select v-model="form.date" placeholder="开考时间" class="w-100">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="今天" value="today"></el-option>
                        <el-option label="三天内" value="three"></el-option>
                        <el-option label="一周内" value="week"></el-option>
                        <el-option label="当月" value="month"></el-option>
                        <el-option label="当年" value="year"></el-option>
                    </el-select>
                </div>
                <div class="card-body border-top py-3">
                    <div class="mt-2 text-dark">
                        <div class="my-3">
                            <el-input clearable prefix-icon="el-icon-search" v-model="form.keyWords" placeholder="关键字" class="w-100"></el-input>
                        </div>
                    </div>
                </div>
                <div class="card-body border-top py-3">
                    <el-button type="primary" plain icon="el-icon-search" v-on:click="btnSearchClick">查 询</el-button>
                    <el-button plain icon="el-icon-close" v-on:click="examDialogVisible=false">取 消</el-button>
                </div>
            </div>
        </div>
    </el-drawer>
</template>
@section Scripts{
    <script src="/sitefiles/assets/js/app/exam/examPaper.js" type="text/javascript"></script>
}